<template>
  <div class="login-container">
    <div class="container">
      <div class="left">
        <div class="logo-container">
          <logo-component />
        </div>
      </div>
      <div class="right">
        <div class="box-card">
          <el-form ref="loginFormRef" :rules="loginRules" :model="loginData" class="login-form">
            <div class="flex text-black items-center py-4">
              <div class="welcome">{{ titleObj.customerName }}</div>
              <div class="text-2xl flex-1 text-center title">
                欢迎登录{{ titleObj.projectName }}
                <div class="bottom-line"></div>
              </div>
            </div>
            <div class="login-content">
              <el-form-item prop="accountPhone">
                <div class="p-2">
                  <svg-icon icon-class="user" />
                </div>
                <el-input class="flex-1" ref="username" size="large" v-model="loginData.accountPhone" placeholder="输入用户名"
                  name="username" />
              </el-form-item>

              <el-tooltip :disabled="isCapslock === false" content="Caps lock is On" placement="right">
                <el-form-item prop="accountPassword">
                  <span class="p-2">
                    <svg-icon icon-class="password" />
                  </span>
                  <el-input class="flex-1" v-model="loginData.accountPassword" placeholder="密码"
                    :type="passwordVisible === false ? 'password' : 'input'" size="large" name="password"
                    @keyup="checkCapslock" @keyup.enter.native="handleLogin" />
                  <span class="mr-2" @click="passwordVisible = !passwordVisible">
                    <svg-icon :icon-class="passwordVisible === false ? 'eye' : 'eye-open'
                      " class="text-gray cursor-pointer" />
                  </span>
                </el-form-item>
              </el-tooltip>
              <div class="checkbox">
                <el-form-item>
                  <el-checkbox-group v-model="passwordCheckbox">
                    <el-checkbox label="记住密码" name="type" />
                  </el-checkbox-group>
                </el-form-item>
              </div>

              <el-button size="default" :loading="loading" type="primary" class="w-full" @click.prevent="handleLogin">登录
              </el-button>
            </div>
          </el-form>
          <div class="bottom-title">
            <div class="left-line"></div>
            <div class="center-name">欢迎登录系统</div>
            <div class="right-line"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 重置密码弹框 -->
    <global-message-box v-if="isMessageBoxShow" @messageBoxSave="messageBoxSave"
      @messageBoxReceive="isMessageBoxShow = false">
      <template #content>
        <div class="messageBoxContent">
          <el-form ref="form" :model="resetForm">
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password" />
              </span>
              <el-input v-model="resetForm.onePassword" placeholder="请输入密码"
                :type="resetOnePasswordVisible === false ? 'password' : 'input'" />
              <span class="mr-2" @click="resetOnePasswordVisible = !resetOnePasswordVisible">
                <svg-icon :icon-class="resetOnePasswordVisible === false ? 'eye' : 'eye-open'
                  " class="text-gray cursor-pointer" />
              </span>
            </el-form-item>
            <el-form-item>
              <span class="p-2">
                <svg-icon icon-class="password" />
              </span>
              <el-input v-model="resetForm.twoPassword" placeholder="请再次却密码"
                        @keyup.enter.native="messageBoxSave"
                :type="resetTwpPasswordVisible === false ? 'password' : 'input'" />
              <span class="mr-2" @click="resetTwpPasswordVisible = !resetTwpPasswordVisible">
                <svg-icon :icon-class="resetTwpPasswordVisible === false ? 'eye' : 'eye-open'
                  " class="text-gray cursor-pointer" />
              </span>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </global-message-box>
  </div>
</template>

<script>
import { passwordValidator } from "./validator"
import { updateLAccount, updateLAccountAndPwd } from "@/api/userControl/account"
import { queryLoginInfo } from "@/api/user"
import logoComponent from "@/components/LoginLogo"
export default {
  name: "App",
  data () {
    return {
      loading: false,
      isCapslock: false,
      passwordVisible: false,
      resetOnePasswordVisible: false,
      resetTwpPasswordVisible: false,
      isMessageBoxShow: false,
      captchaBase64: "",
      passwordCheckbox: [],
      loginData: {
        accountPhone: null,
        accountPassword: ""
      },
      loginRules: {
        accountName: [{ required: true, trigger: "blur" }],
        accountPassword: [
          { required: true, trigger: "blur", validator: passwordValidator }
        ]
      },
      resetForm: {
        onePassword: "",
        twoPassword: ""
      }, //重置密码form,
      titleObj: {}
    }
  },
  async created () {
    const data = await queryLoginInfo({
      projectCode: this.$route.query.projectCode
    })
    this.titleObj = data.object
  },
  components: {
    logoComponent
  },
  methods: {
    /**
     * 检查输入大小写状态
     */
    checkCapslock (e) {
      const { key } = e
      this.isCapslock = key && key.length === 1 && key >= "A" && key <= "Z"
    },
    handleLogin () {
      this.$refs.loginFormRef.validate((valid) => {
        if (valid) {
          this.loading = true
          this.$store.dispatch("user/login", this.loginData).then((show) => {
              if (show) {
                this.isMessageBoxShow = show
              } else {
                const query = this.$route.query
                const redirect = query.redirect ?? "/"

                // todo query参数
                const otherQueryParams = Object.keys(query).reduce(
                  (acc, cur) => {
                    if (cur !== "redirect") {
                      acc[cur] = query[cur]
                    }
                    return acc
                  },
                  {}
                )

                this.$router.push({ path: redirect, query: otherQueryParams })
              }
            })
            .catch(() => {
              // 验证失败，重新生成验证码
              // getCaptcha();
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },
    async messageBoxSave () {
      const res = await updateLAccountAndPwd({
        accountPhone: this.loginData.accountPhone,
        accountPassword: this.resetForm.onePassword
      })
      console.log(res, "我是重置密码")
      const query = this.$route.query
      const redirect = query.redirect ?? "/"

      // todo query参数
      const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur]
        }
        return acc
      }, {})

      this.$router.push({ path: redirect, query: otherQueryParams })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  min-height: 100%;
  background: url("../../../assets/login/logo1.png") no-repeat;
  background-size: 100% 100%;

  .container {
    display: flex;
    width: 1236px;
    height: 700px;
    margin: 0 auto;
  }

  .left {
    flex: 3;
    position: relative;

    .logo-container {
      position: absolute;
      top: 100px;
    }
  }

  .right {
    margin-top: 85px;
    height: 670px;
    flex: 2;
    background: #fff;
  }

  .box-card {
    .welcome {
      display: flex;
      align-items: center;
      justify-content: center;
      padding-bottom: 30px;
      font-size: 22px;
      font-weight: 600;
      color: #4a4a4a;
    }

    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-bottom: 30px;
      font-size: 22px;
      font-weight: 500;
      color: #4a4a4a;

      .bottom-line {
        width: 42px;
        height: 4px;
        margin-top: 12px;
        background: #3276ff;
      }
    }

    .login-form {
      width: 520px;
      max-width: 100%;
      padding: 80px 0 0;
      margin: 0 auto;
      overflow: hidden;

      .captcha {
        position: absolute;
        top: 0;
        right: 0;

        img {
          width: 120px;
          height: 48px;
          cursor: pointer;
        }
      }
    }

    .login-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .checkbox {
        .el-form-item {
          background: transparent;
          border-radius: 5px;
        }
      }

      .w-full {
        width: 408px;
        height: 53px;

        &:hover {
          cursor: pointer;
        }
      }
    }

    .bottom-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 71px;

      .left-line {
        width: 132px;
        height: 1px;
        background: #d9d9d9;
      }

      .center-name {
        width: 96px;
        height: 24px;
        margin: 0 24px;
        font-size: 16px;
        font-weight: 500;
        color: #4a4a4a;
      }

      .right-line {
        width: 132px;
        height: 1px;
        background: #d9d9d9;
      }
    }
  }

  .messageBoxContent {
    width: 100%;
    height: 100%;

    ::v-deep.el-input__inner {
      color: #989898;
      background: transparent;
      border: 0;
      border-radius: 0;
      caret-color: #989898;

      &:-webkit-autofill {
        box-shadow: 0 0 0 1000px transparent inset !important;
        -webkit-text-fill-color: #fff !important;
      }

      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        transition: color 99999s ease-out, background-color 99999s ease-out;
        transition-delay: 99999s;
      }
    }
  }
}

.el-form-item {
  width: 418px;
  // background: rgb(0 0 0 / 10%);
  background: #f1f4f8;
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 5px;
  padding: 0 10px;

  ::v-deep.el-form-item__content {
    display: flex;
  }
}

.el-input {
  background: transparent;

  // 子组件 scoped 无效，使用 :deep
  // .el-input__wrapper {
  //   padding: 0;
  //   background: transparent;
  //   box-shadow: none;

  //   .el-input__inner {
  //     color: #989898;
  //     background: transparent;
  //     border: 0;
  //     border-radius: 0;
  //     caret-color: #989898;

  //     &:-webkit-autofill {
  //       box-shadow: 0 0 0 1000px transparent inset !important;
  //       -webkit-text-fill-color: #fff !important;
  //     }

  //     // 设置输入框自动填充的延迟属性
  //     &:-webkit-autofill,
  //     &:-webkit-autofill:hover,
  //     &:-webkit-autofill:focus,
  //     &:-webkit-autofill:active {
  //       transition: color 99999s ease-out, background-color 99999s ease-out;
  //       transition-delay: 99999s;
  //     }
  //   }
  // }
}

.login-content {
  ::v-deep.el-input__inner {
    color: #989898;
    background: transparent;
    border: 0;
    border-radius: 0;
    caret-color: #989898;

    &:-webkit-autofill {
      box-shadow: 0 0 0 1000px transparent inset !important;
      -webkit-text-fill-color: #fff !important;
    }

    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus,
    &:-webkit-autofill:active {
      transition: color 99999s ease-out, background-color 99999s ease-out;
      transition-delay: 99999s;
    }
  }
}
</style>
